<script>
import { verifyAccount } from "@/api/mallApi/account";
import OrderModel from "@/views/mall/managementend/ordergoods/order-manage/order-model.vue";

export default {
  name: "orderCompareBill",
  components: { OrderModel },
  data() {
    return {
      form: {
        mallName: "",
        orderCode: "",
        paymentSerialNumber: "",
        reconciliation: "",
      },
      tableData: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogTitle: "",
      dialogData: {},
      dialogLoading: false,
      currentRow: {},
      centerDialogVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.tableLoading = true;
      const params = {
        isPage: 1,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.form,
      };
      verifyAccount(params)
        .then((res) => {
          if (res.code === "00000") {
            this.tableData = res.data.rows;
            this.total = res.data.totalRows;
            this.tableLoading = false;
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.tableLoading = false;
        });
    },
    handleClear() {
      this.form = {
        mallName: "",
        orderCode: "",
        paymentSerialNumber: "",
        status: "",
      };
    },
    get() {
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleOrderDetail(currentRow) {
      this.currentRow = currentRow;
      this.centerDialogVisible = true;
    },
    cancelgoodesmodel() {
      this.centerDialogVisible = false;
    },
  },
};
</script>

<template>
  <div>
    <div class="form" style="margin-top: 20px">
      <div class="formLeft">
        <!--店铺名称-->
        <el-form ref="form" :model="form" label-width="150px" :inline="true">
          <el-form-item>
            <p>店铺名称:</p>
            <el-input
              v-model="form.mallName"
              placeholder="请输入店铺名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <p>订单号:</p>
            <el-input
              v-model="form.orderCode"
              placeholder="请输入订单号"
            ></el-input>
          </el-form-item>
          <!--支付单号-->
          <el-form-item>
            <p>支付单号:</p>
            <el-input
              v-model="form.paymentSerialNumber"
              placeholder="请输入支付订单号"
            ></el-input>
          </el-form-item>
          <!--对账状态-->
          <el-form-item>
            <p>对账状态:</p>
            <el-select v-model="form.reconciliation" placeholder="请选择">
              <el-option label="对账成功" value="1"></el-option>
              <el-option label="对账失败" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="formRight">
        <el-button type="primary" @click="getList"> 查询 </el-button>
        <el-button @click="handleClear">重置</el-button>
      </div>
    </div>
    <div class="orderCompareBill">
      <!-- <div class="form" style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="150px" :inline="true">
          <el-form-item label="店铺名称">
            <el-input
              v-model="form.mallName"
              placeholder="请输入店铺名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单号">
            <el-input
              v-model="form.orderCode"
              placeholder="请输入订单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付单号">
            <el-input
              v-model="form.paymentSerialNumber"
              placeholder="请输入支付订单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="对账状态">
            <el-select v-model="form.reconciliation" placeholder="请选择">
              <el-option label="对账成功" value="1"></el-option>
              <el-option label="对账失败" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 80px">
            <el-button type="primary" @click="getList"
              ><i style="margin-right: 6px" class="el-icon-search"></i>搜索
            </el-button>
            <el-button @click="handleClear">清空</el-button>
          </el-form-item>
        </el-form>
      </div> -->
      <el-button
        icon="el-icon-refresh-right"
        circle
        @click="get"
        style="margin-left: 95%;margin-top: 20px;"
      ></el-button>
      <div class="table" style="padding: 20px">
        <!--表格-->
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          style="width: 100%"
        >
          <!--序号-->
          <el-table-column type="index" label="序号" width="50"  align="center">
            <template slot-scope="scope">
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="mallName"
            label="店铺名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="paymentSerialNumber"
            label="支付单号"
            min-width="300"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.paymentSerialNumber }}
            </template>
          </el-table-column>
          <el-table-column
            prop="orderCode"
            label="订单号"
            align="center"
            width="300"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="handleOrderDetail(scope.row)"
              >
                {{ scope.row.orderCode }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="paidAmount" label="订单金额" align="center">
            <template slot-scope="scope">
              {{ (scope.row.paidAmount / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="settleAmount" label="结算金额" align="center">
            <template slot-scope="scope">
              {{ (scope.row.settleAmount / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="paidAmount" label="支付单金额" align="center">
            <template slot-scope="scope">
              {{ (scope.row.paidAmount / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="paidAmount"
            label="支付单金结算金额"
            align="center"
          >
            <template slot-scope="scope">
              {{ (scope.row.paidAmount / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="rejectAmount"
            label="三方退款金额"
            align="center"
          >
            <template slot-scope="scope">
              {{ (scope.row.rejectAmount / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="rejectAmount"
            label="系统退款金额"
            align="center"
          >
            <template slot-scope="scope">
              {{ (scope.row.rejectAmount / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="reconciliation"
            label="对账状态"
            align="center"
          >
            <!--0:未对账1：已对账，2无需对账-->
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.reconciliation === 0"
                type="danger"
                size="small"
                >未对账
              </el-tag>
              <el-tag
                v-if="scope.row.reconciliation === 1"
                type="success"
                size="small"
                >已对账
              </el-tag>
              <el-tag
                v-if="scope.row.reconciliation === 2"
                type="info"
                size="small"
                >无需对账
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reconciliationTime"
            label="对账成功时间"
          ></el-table-column>
          <el-table-column
            prop=""
            label="操作"
            align="center"
          ></el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <div class="pagination" style="margin-top: 20px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-row>
      </div>
      <!-- /.table -->
      <OrderModel
        v-show="centerDialogVisible"
        :centerDialogVisible="centerDialogVisible"
        :currentRow="currentRow"
        @cancelgoodesmodel="cancelgoodesmodel"
      ></OrderModel>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form{
  width: 98%;
  margin: 1%;
  min-height: 65px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .formLeft{
    margin-top: 20px;
    margin-left: 30px;
    width: 1200px;
    display: flex;
    ::v-deep .el-form-item__content {
      display: flex;
      align-items: center;
      p {
        display: inline-block;
        // margin-left: 50px;
        min-width: 65px;
        font-size: 14px;
      }
    }
  }
  .formRight{
    width: 11%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }
}
.orderCompareBill {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
}
</style>
